<!--
 * @Author: your name
 * @Date: 2021-08-24 10:47:09
 * @LastEditTime: 2021-09-05 13:16:27
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \bigdate\src\views\Contents\page.vue
-->
<template>
    <Card :loading="loading">
        <div class="cardContent">
            <div>
                <Statistic>
                    <template #title>
                        {{ title }}
                    </template>
                    <template #value>
                        {{ value }}
                    </template>
                </Statistic>
            </div>
            <div>
                <img :src="img" alt="" />
            </div>
        </div>
    </Card>
</template>
<script lange="ts">
import { Card, Statistic } from 'ant-design-vue'
import { defineComponent, unref, computed, ref, reactive } from 'vue'

export default defineComponent({
    name: 'Cose',
    components: {
        Card,
        Statistic,
    },
    props: {
        loading: Boolean,
        title: {
            type: String,
            default: () => 'title',
        },
        value: {
            type: Number,
            default: () => 0,
        },
        img: {
            type: String,
            validator: (t) => {
                if (!t || typeof t != 'string') {
                    throw console.error('图表必须存在')
                }
            },
        },
    },
    setup() {
        return {}
    },
})
</script>
<style lang="less" scoped>
.cardContent {
  display: flex;
  align-items: center;
  justify-content: space-between;
  & > div:nth-of-type(2) {
    img {
      width: 3.5rem;
      height: 3.5rem;
    }
  }
}
</style>
